<!-- 合同章列表页面 -->
<template>
  <div class="seal">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
      ></c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        showPagination
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
        @onSearch="onSearch"
      >
        <!--提交人 -->
        <template slot="createUser" slot-scope="createUser">
          <span v-if="createUser.tableRow">
            {{
            createUser.tableRow.realName
            }}
          </span>
          <span v-else>-</span>
        </template>
        <!-- 状态 -->
        <template slot="auditState" slot-scope="auditState">
          <a-tag>{{ auditState.tableRow.auditState }}</a-tag>
        </template>
        <!-- 时间 -->
        <template slot="createDate" slot-scope="row">
          <span>{{ $getTime(row.tableRow.createDate) }}</span>
        </template>
        <!-- 状态 -->
        <template slot="auditState" slot-scope="row">
          <a-tag
            :color="$dealDic(sealAuditState,row.tableRow.auditState,'tagColor')"
          >{{$dealDic(sealAuditState,row.tableRow.auditState,'label')}}</a-tag>
        </template>
        <!-- 章类型 -->
        <template slot="type" slot-scope="row">
          <a-tag >
            {{$dealDic(sealType,row.tableRow.type,'label')}}
          </a-tag>
        </template>
        <template slot="handle" slot-scope="row">
          <a @click="onView(row.tableRow)">
            <a-icon type="eye" />查看
          </a>
        </template>
      </c-table>
    </a-card>
  </div>
</template>

<script>

import { sealType, sealAuditState } from "@/dict/seal";
import { getCompanySealPage } from "@/api/company/seal";

const mergeCells = (value, data, key, index, valueKey) => {
  let rowSpan = 1;
  if (index !== 0 && value[valueKey] === data[index - 1][key][valueKey]) {
    return 0;
  }
  for (let i = index + 1; i < data.length; i++) {
    if (value[valueKey] !== data[i][key][valueKey]) {
      break;
    }
    rowSpan++;
  }
  return rowSpan;
};
export default {
  name: "users",
  components: {},
  data() {
    return {
      sealType,
      sealAuditState,
      tableSearchForm: {
        searchKey: null,
        auditState: "all",
        type: "all"
      },
      tableSearchFormData: [
        {
          label: "状态",
          prop: "auditState",
          type: "select",
          typeData: [
            {
              label: "全部",
              value: "all"
            }].concat(sealAuditState)
        },
        {
          label: "类型",
          prop: "type",
          type: "select",
          typeData: [
            {
              label: "全部",
              value: "all"
            }].concat(sealType)
        },
        {
          label: "请输入企业名称/简称",
          prop: "searchKey",
          type: "search"
        }
      ],
      tableColumns: [
        {
          title: "编号",
          dataIndex: "id",
          width: 80,
          align: "center"
        },
        {
          title: "企业名称",
          dataIndex: "company",
          width: "100",
          align: "center",
          customRender: (value, row, index) => {
            const obj = {
              children: value.companyName ? value.companyName : "-",
              attrs: {}
            };
            if (value.companyName === "-") {
              obj.attrs.rowSpan = 1;
            } else {
              obj.attrs.rowSpan = mergeCells(
                value,
                this.tableData,
                "company",
                index,
                "companyName"
              );
            }
            return obj;
          }
        },
        {
          title: "提交人",
          dataIndex: "createUser",
          scopedSlots: { customRender: "createUser" },
          align: "center"
        },
        {
          title: "章类型",
          scopedSlots: { customRender: "type" },
          align: "center"
        },
        {
          title: "申请时间",
          scopedSlots: { customRender: "createDate" },
          align: "center"
        },
        {
          title: "状态",
          scopedSlots: { customRender: "auditState" },
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          width: "100px",
          scopedSlots: { customRender: "handle" },
          align: "center"
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50", "200", "1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
  
    };
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    customRenderArr(datas) {
      datas.forEach((item, index) => {
        if (!item.company) {
          item.company = {
            companyName: "-"
          };
        }
      });
      return datas;
    },
    onPageOnlod() {
      this.loading = true;
      getCompanySealPage({
        auditState:
          this.tableSearchForm.auditState == "all"
            ? null
            : this.tableSearchForm.auditState,
        searchKey: this.tableSearchForm.searchKey,
        type:
          this.tableSearchForm.type == "all" ? null : this.tableSearchForm.type,
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = this.customRenderArr(res.data.pageData);
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onSearch() {
      this.onPageOnlod();
    },
    onView(row) {
      this.$router.push({
        name: "Company_List_Detail",
        query: { page: "chapter", 
        companyId: row.company.id ,
        companyName: row.company.companyName ,
        id: row.preAuthId,
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
